<template>
  <div v-if="props.info.originalPicTask.outOriginalType == 'REAL_SHOOT'">
    <a-space class="mt10">
      <div>实物拍摄出原图</div>
      <div class="status">
        <span v-if="props.info.sendSample.status == 'WAIT_SEND_SAMPLE'">待送样</span>
        <span v-if="props.info.sendSample.status == 'WAIT_RECEIVE_SAMPLE'">待收样</span>
        <span v-if="props.info.sendSample.status == 'RECEIVED_SAMPLE'">已到样</span>
      </div>
      <a-button type="text" @click="showModal = true" v-if="props.info.sendSample.status == 'WAIT_SEND_SAMPLE' && props.info.sendSample.sampleAddress">立即送样</a-button>
    </a-space>
    <div class="address-detail">
      <div class="left">
        <div v-if="props.info.sendSample.sampleAddress">
          <div>请将样品送到以下地址，有专人接收</div>
          <div class="common-text">{{ $extract(props.info, 'sendSample.sampleAddress.userName') }}（{{ $extract(props.info, 'sendSample.sampleAddress.phone') }}）</div>
          <div class="common-text">{{ $extract(props.info, 'sendSample.sampleAddress.stateOrRegion') }}，{{ $extract(props.info, 'sendSample.sampleAddress.city') }}</div>
          <div class="common-text">{{ $extract(props.info, 'sendSample.sampleAddress.address') }}</div>
        </div>
        <a-empty v-else description="暂无组织接单" />
      </div>
      <div class="right clearfix">
        <div v-if="props.info.sendSample.sendType">
          <div class="fl">
            <div>
              <span class="label-style">送样方式：</span>
              <span>{{ props.info.sendSample.sendType == 'DOOR_DELIVERY' ? '送货上门' : '快递' }}</span>
            </div>
            <div>
              <span class="label-style">送样日期：</span>
              <span>{{ $setTime(props.info.sendSample.gmtSend, 'YYYY-MM-DD') }}</span>
            </div>
            <div>
              <span v-if="props.info.sendSample.sendType != 'DOOR_DELIVERY'" class="label-style">物 流 商：</span>
              <span>{{ props.info.sendSample.logistics }}</span>
            </div>
            <div>
              <span v-if="props.info.sendSample.sendType != 'DOOR_DELIVERY'" class="label-style">跟 踪 号：</span>
              <span>{{ props.info.sendSample.trackingNumber }}</span>
            </div>
          </div>
          <div class="fr">
            <a-button type="text" style="margin-right: 5px" @click="showModal = true" v-if="props.info.sendSample.status != 'RECEIVED_SAMPLE'">修改</a-button>
          </div>
        </div>
        <a-empty v-else description="无送样信息" />
      </div>
    </div>
  </div>
  <div v-else>
    <div class="mt10">CAD渲染出原图</div>
    <div class="c4d-box">
      <div class="mb10" v-for="item in props.info.product.cadList" :key="item.url">
        <a-space>
          <div class="img-box">
            <img src="@/assets/CAD.png" width="40" height="40" alt="" />
          </div>
          <div>
            <div>CAD文件</div>
            <div class="common-text">{{ item.name }}</div>
          </div>
        </a-space>
      </div>
    </div>
  </div>
  <div class="mt10">任务需求描述</div>
  <div class="task-require">{{ props.info.originalPicTask.remark }} </div>
  <editCollectionAddress v-if="showModal" v-model="showModal" :info="props.info" @save="props.getDetail" />
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import editCollectionAddress from './editCollectionAddress.vue'
  const props = defineProps(['info', 'getDetail'])
  let showModal = ref(false)
</script>

<style lang="less" scoped>
  .common-text {
    font-size: 12px;
    color: #a39999;
  }

  .status {
    width: 50px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    // color: white;
    background-color: #f2f2f2;
    border-radius: 15px;
    border: 1px solid #d7d7d7;
    font-size: 12px;
  }
  .address-detail {
    width: 100%;
    display: flex;

    .left {
      width: 50%;
      border: 1px solid #d7d7d7;
      padding: 5px;
    }
    .right {
      flex: 1;
      border: 1px solid #d7d7d7;
      padding: 5px;
      // display: flex;
      .label-style {
        display: inline-block;
        width: 80px;
        text-align: right;
        color: #a39999;
      }
    }
  }
  .c4d-box,
  .attachment-box {
    padding: 5px;
    border: 1px solid #d7d7d7;
  }

  .attachment-box {
    .item {
      width: 100%;
      height: 30px;
      line-height: 30px;
      font-size: 12px;
      background: #d7d7d7;
      display: flex;
      padding: 0 10px;
    }
  }

  .task-require {
    margin-top: 10px;
    min-height: 70px;
    padding: 5px;
    border: 1px solid #d7d7d7;
  }
</style>
